<template>
  <div>
    <div class="nav">
      <breadcrumb :list="navList"></breadcrumb>
    </div>
    <fillter :filterList="tableHead" @callback="sycntableHead"></fillter>
    <transition name="el-zoom-in-top">
      <div class="transition-box">
        <Qtable
          :tableData="tableList"
          :toolBar="toolBar"
          :tableHead="tableHead"
          selection
          @event="eventFn"
          :footer="footer"
          @handler="handler"
        >
          <template slot="slot" slot-scope="scope">
            <div v-if="scope.data.prop === 'EAC_CORP_IE'">
              <el-tag>{{ scope.data.row[scope.data.prop] }}</el-tag>
            </div>
            <div v-else-if="scope.data.prop === 'CREATE_DATE'">
              <el-date-picker
                v-model="scope.data.row[scope.data.prop]"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="disabledDate"
              ></el-date-picker>
            </div>
          </template>
        </Qtable>
      </div>
    </transition>
  </div>
</template>
<script>
import Qtable from "@/components/table/table.vue";
import fillter from "@/components/table/fillter.vue";
import { tableList, tableHead, toolBar, footer } from "./js/table.js";
import breadcrumb from "@/components/breadcrumb.vue";

export default {
  components: {
    Qtable,
    fillter,
    breadcrumb
  },
  data() {
    return {
      tableList: tableList(),
      tableHead: tableHead(),
      toolBar: toolBar(),
      footer: footer(),
      dialogVisible: false, // 展示弹窗开关
      navList: [
        {
          name: "基础数据表格",
          type: false,
          url: ""
        },
        {
          name: "table组件",
          type: true,
          url: ""
        }
      ],
      disabledDate(time) {
        return time.getTime() > Date.now();
      }
    };
  },
  mounted() {
    this.show = !this.show;
  },
  methods: {
    // @event 绑定的事件
    eventFn(obj) {
      switch (obj.event) {
        //case 与 toolBar 内容一致 匹配后进行相关操作
        case "add":
          this.$alert(obj, "触发add事件", {
            confirmButtonText: "确定",
            callback: action => {
              this.$message({
                type: "info",
                message: "已关闭"
              });
            }
          });
          //执行操作
          break;
        case "edit":
          this.$alert(obj, "触发edit事件", {
            confirmButtonText: "确定",
            callback: action => {
              this.$message({
                type: "info",
                message: "已关闭"
              });
            }
          });
          //执行操作
          break;
        case "delete":
          this.$alert(obj, "触发delete事件", {
            confirmButtonText: "确定",
            callback: action => {
              this.$message({
                type: "info",
                message: "已关闭"
              });
            }
          });
          //执行操作
          break;
        case "editOn1":
          this.$alert(obj, "触发editOn1事件", {
            confirmButtonText: "确定",
            callback: action => {
              this.$message({
                type: "info",
                message: "已关闭"
              });
            }
          });
          //执行操作
          break;
        case "editOn":
          this.$alert(obj, "触发editOn事件", {
            confirmButtonText: "确定",
            callback: action => {
              this.$message({
                type: "info",
                message: "已关闭"
              });
            }
          });
          //执行操作
          break;
      }
    },
    // @handler 绑定的事件
    handler(obj) {
      this.footer = obj;
      console.log(this.footer);
    },
    beforeClose() {
      // this.uploadList.pop();
      console.log(this.uploadList);
      this.dialogVisible = false;
    },
    sycntableHead(list) {
      this.tableHead = list;
    }
  }
};
</script>
<style lang="less" scoped>
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
}
</style>
